<template>
    <div>
    <a-modal 
        v-model="visible" 
        :bodyStyle="bstyle" 
        :footer="null"
        @cancel="cancel"
        :width="screenWidth<1920?'40%':'30%'"
        v-dragModal
    >
        <template slot="title">
            <img 
                ondragstart="return false"
                oncontextmenu="return false" 
                v-if="$store.state.language == 'zh' && $store.state.commonModule.oemConfig.copyright_zh" :src="$store.state.commonModule.oemConfig.copyright_zh"
                alt="fbs_logo"
            />
            <img 
                ondragstart="return false"
                oncontextmenu="return false"
                v-if="$store.state.language == 'en' && $store.state.commonModule.oemConfig.copyright_en" :src="$store.state.commonModule.oemConfig.copyright_en"
                alt="fbs_logo_en"
            />
        </template>
        <template slot="closeIcon">
            <a-icon type="close-circle" style="color: #fff" />
        </template>
        <div class="top_img">
            <img 
                ondragstart="return false"
                oncontextmenu="return false"
                src="../../../static/images/png/ibt_bq.png" alt="ibt_bg">
        </div>
        <div>
            <a-card size="small" :title="$t('Copyright_information')">
                <!-- 标识码 -->
                <p class="list">
                    <span class="tit" :class="$store.state.language=='zh'?'tit-ch':''">{{$t('ID_code')}}：</span>
                    <span>{{info.cluster_id ? info.cluster_id : '-'}}</span>
                </p>
                <!-- 系统版本 -->
                <p class="list">
                    <span class="tit" :class="$store.state.language=='zh'?'tit-ch':''">{{$t('System_version')}}：</span>
                    <!-- 版本号 -->
                    <span>{{currentVersion ? 'V'+currentVersion : '-'}}
                        <!-- <span v-if="isLastVersion" class="update-time-tip" style="color:var(--mainRedColor)">
                            New
                        </span>
                        <span class="update-time-tip" style="color:var(--mainRedColor)">(更新时间:2022/11/01 10:10:10)</span> -->
                    </span>
                    <!-- 升级 -->
                    <a-button
                        v-userAuth="'A6-2'"
                        @click="handleUpdate"
                        class="auth-operation-btn"
                        type="primary" size="small" shape="round"
                    >
                        {{$t('Upgrade')}}
                    </a-button>
                </p>
                <p class="list" v-if="$store.state.commonModule.oemConfig.company">
                    <span class="tit" :class="$store.state.language=='zh'?'tit-ch':''">{{$t('Company_name')}}：</span>
                    <span>{{ $store.state.commonModule.oemConfig.company }}</span>
                </p>
                <!--声明  广电五舟软件声明-->
                <p class="list" v-if="$store.state.commonModule.oemConfig.softwareStatement">
                    <span class="tit" :class="$store.state.language=='zh'?'tit-ch':''">{{$t('Declare')}}：</span>
                    <span>{{ $store.state.commonModule.oemConfig.softwareStatement }}</span><!-- class="software-statement" -->
                    <a-button
                        @click="openDeclare"
                        class="auth-operation-btn"
                        type="primary" size="small" shape="round"
                    >
                    {{$t('View')}}
                    </a-button>
                </p>
                <p class="list">
                    <span class="tit" :class="$store.state.language=='zh'?'tit-ch':''">{{$t('Capacity_type')}}：</span>
                    <!-- <span :style="{ color: info.lic ? '#2bc6b9' : '#ff4d4f'}">  -->
                    <span :style="{ color: info.cluster_status == 0 ? '#2bc6b9' : '#ff4d4f'}">
                        {{ info.lic_type == 0 ? $t('Node') : 
                            info.lic_type == 1 ? $t('Capacity') : 
                            info.lic_type == 2 ? $t('Disc_bit') : 
                            info.lic_type == 3 ? $t('Trial') : 
                            info.lic_type == 4 ? $t('Unauthorized') : 
                            info.lic_type == 5 ? $t('Machine_info_mismatch') : '' }}
                        {{ info.lic_values ? info.lic_values : ''}} 
                        {{ info.lic_type == 0 ? $t('Pcs') : info.lic_type == 1 ? 'TiB' : info.lic_type == 2 ? $t('Pcs') : info.lic_type == 3 ? $t('Day') : '' }}
                        <!-- {{ !info.lic ? ' ( ' + $t('Abnormal') + ' ) ' : '' }} -->
                        {{ info.cluster_status == 2 ? ' ( ' + $t('Abnormal') + ' ) ' : '' }}
                    </span>
                    <a-button v-userAuth="'A6-3'" @click="handleok" class="auth-operation-btn" type="primary" size="small" shape="round">
                        {{$t('To_authorize')}}
                    </a-button>
                </p>
                <!-- <p style="display: block; padding-left: 33%; color: #fd3756">
                    未授权（试用期至2021年8月28日）
                </p> -->
            </a-card>
        </div>
    </a-modal>

    <!-- 更新系统 -->
    <div v-if="update_dialog">
        <UpdateSystem 
            :visible="update_dialog"
            @closeUpdateDialog="closeUpdateDialog"
            :currentVersion="currentVersion"
        />
    </div>
    
    </div>
</template>

<script>
import request from '@/request/request'
import UpdateSystem from '@/components/copyright/updateSystem/UpdateSystem'

export default {
    props:['rightF', 'powerData', 'currentVersion'],
    components: { UpdateSystem },
    data() {
        return {
            visible: false,
            bstyle: {"background-color": "var(--themeColor)"},
            info: '',
            declare_dialog: false,
            update_dialog: false,
            screenWidth: window.screen.width,
            isLastVersion: false
        };
    },
    watch:{
        rightF(val){
            this.visible=val
        },
        powerData(newValue) {
            this.info = newValue;
            let lic = false;
            if(this.info.cluster_status == 0) lic = true;
            this.$emit('oFlag', lic);
        }
    },
    mounted() {
        // this.getData();
    },
    methods: {
        getData() {
            request('get', 'license/').then(res => {
                // console.log('版权信息', res);
                if(res.data.flag == 1) {
                    this.model(res.data.id) //返回模板
                    this.notice(res.data.id,res.data.params,res.data.flag) //通知列表显示
                }else {
                    if(res.data.success) {
                        this.info = res.data.msg;
                        let lic = false;
                        if(this.info.cluster_status == 0) {
                            lic = true;
                        }
                        this.$emit('oFlag', lic)
                    }
                }
                // this.$emit('oFlag', this.info.lic)
            })
        },

        //前往授权
        handleok() {
            // console.log('前往授权')
            this.$emit('omodal', false);
            this.$emit('rightTo', {
                flag: true,
                isShowCloseBtn: true,
            });
        },

        cancel() {
            // console.log('关闭')
            this.$emit('omodal',false)
        },

        //打开软件声明
        openDeclare() {
          this.$emit('isOpenDeclare', true);
        },

        //打开升级弹窗
        handleUpdate() {
            this.update_dialog = true;
        },

        //关闭升级弹窗
        closeUpdateDialog() {
            this.update_dialog = false;
        }
    }
}
</script>
<style scoped>
::v-deep .ant-modal-header{
    background-color: var(--themeColor);
    border-bottom: none;
}
.top_img {
    width: 100%;
    text-align: center;
}
.list{
    background-color: #f1f8ff;
    /* padding: 0.2rem 0; */
}
.tit {
    background-color: #e6f4ff;
    padding: 0.2rem 0 0.2rem 1rem;
    display: inline-block;
    width: 30%;
    margin-right: 1rem;
}
.tit-ch {
    width: 25%;
}
.software-statement {
    color: var(--themeColor);
    cursor: pointer;
    text-decoration: underline;
}
.auth-operation-btn {
    float: right; 
    margin-right: 1rem;
    margin-top: 2px;
}
.install-time-tip {
    float: right;
    font-size: 12px;
    margin-right: 6px;
    margin-top: 3px;
}
.update-time-tip {
    font-size: 12px;
}
</style>
